@import 'themes';
@import 'repl-common';
@import 'repl-console-message';

@mixin containerRight($theme) {
  .repl-container-right {
    display: flex;
    max-width: 100vw;
    flex: 0 0 30vw;
    min-width: 8px;
    @include fullHeight();
    overflow: auto;
    flex-direction: column;

    .repl-header {
      height: 5px;
    }

    .repl-console {
      min-width: 280px;
      position: relative;
      top: 0;
      background-color: if($theme == $dark-theme, $dark-app-console-background-color, $lt-app-console-background-color);
      color: if($theme == $dark-theme, $dark-app-console-color, $lt-app-console-color);
      overflow: auto;
      flex: 1;
      display: flex;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;

      .repl-console-resizeable {
        display: flex;
        width: 8px;
        position: relative;
        @include fullHeight();
        background-color: if($theme == $dark-theme, $dark-app-console-resize-handle-color, $lt-app-console-resize-handle-color);
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        cursor: ew-resize;
        align-items: center;

        .repl-console-drag-lines {
          @include notSelectable();

          &:before {
            content: 'ǁ';
            text-align: center;
            margin: 1px;
            color: if($theme == $dark-theme, $dark-app-console-drag-lines-color, $lt-app-console-drag-lines-color);
          }
        }
      }
      @include replConsoleMessage($theme);
    }
  }
}
